<html>
<head>
  <title>Evernote Export</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="YXBJ Windows/601748 (zh-CN, DDL); Windows/10.0.0 (Win64); EDAMVersion=V2;"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="623"/>

<div>
<span><div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><img src="00-ajax笔记_files/美女做饭.jpg" type="image/jpeg" data-filename="美女做饭.jpg" style="font-size: 12pt;" width="218"/></div><div><span style="font-size: 12pt;">女朋友做饭： 买菜 ---&gt; 洗菜 ---&gt; 炒菜 ---&gt; 吃饭  同步</span></div><div><span style="font-size: 16px;">没有女朋友怎么办？</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><img src="00-ajax笔记_files/餐馆.jpg" type="image/jpeg" data-filename="餐馆.jpg" style="font-size: 12pt;" width="358"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;"> 异步</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt;">    </span> <span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">JS 是单线程的语言</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">，所谓“单线程”就是一根筋，对于拿到的程序，一行一行的执行，上面的执行为完成，就傻傻的等着。例如：</span></div><div style="margin: 5px 0px; padding: 5px; background-color: #f5f5f5; border: 1px solid #cccccc; overflow: auto; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px;"><div style="margin: 0px; padding: 0px; white-space: pre-wrap; word-wrap: break-word; font-size: 12pt;"><div style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">var</span> <span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">i, t =</span> <span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">Date.now()</span></div><div style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(0, 0, 255); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">for</span> <span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">(i = 0; i &lt; 100000000; i++</span><span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">) {</span></div><div style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">}</span></div><div style="font-size: 12pt;"><span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">console.log(Date.now()</span> <span style="font-size: 12pt; color: rgb(0, 0, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">- t)</span> <span style="font-size: 12pt; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">//</span> <span style="font-size: 12pt; color: rgb(0, 128, 0); font-family: &quot;Courier New&quot;; font-variant-caps: normal; font-variant-ligatures: normal; line-height: 1.5;">254 （chrome浏览器）</span></div></div></div><div style="margin: 10px auto; padding: 0px; text-indent: 0px; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="margin: 10px auto; padding: 0px; text-indent: 0px; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">上面的程序花费 254ms 的时间执行完成，执行过程中就会有卡顿，其他的事儿就先撂一边不管了。</span></div><div style="margin: 10px auto; padding: 0px; text-indent: 0px; letter-spacing: normal; orphans: 2; text-align: left; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: #ffffff;"><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">执行程序这样没有问题，但是对于 JS 最初使用的环境 ———— 浏览器客户端 ———— 就不一样了。因此在浏览器端运行的 js ，可能会有大量的网络请求，</span><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">而一个网络资源啥时候返回，这个时间是不可预估的。这种情况也要傻傻的等着、卡顿着、啥都不做吗？</span><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">———— 那肯定不行。</span></div><div><span style="text-indent: 0px; letter-spacing: normal; orphans: 2; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(0, 0, 0); font-variant-caps: normal; font-variant-ligatures: normal;">因此，JS 对于这种场景就设计了异步 -— 即，发起一个网络请求，就先不管这边了，先干其他事儿，网络请求啥时候返回结果，到时候再说。这样就能保证一个网页的流程运行。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 24pt;">Ajax（</span> <span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">A</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;">synchronous</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;"> </span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">J</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;">avascript</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;"> </span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">A</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;">nd</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;"> </span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: bold;">X</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 28px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-family: arial, 宋体, sans-serif; font-style: italic; font-variant-caps: normal; font-variant-ligatures: normal;">ML</span><span style="font-size: 24pt;">）</span></div><div><br/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">服务器：代码上线就是上传到服务器</span></div><div><br clear="none"/></div><div>              <img src="00-ajax笔记_files/访问网页.png" type="image/png" data-filename="访问网页.png" width="666"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal;">传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面。</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(51, 51, 51); font-variant-caps: normal; font-variant-ligatures: normal;">AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。</span></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 130px;"></col><col style="width: 130px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt; font-weight: bold;">餐馆吃饭</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt; font-weight: bold;">网页</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">顾客</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">页面</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">服务员</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">Ajax</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">厨房</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 130px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">后台</span></div></td></tr></tbody></table><div><br/></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 402px;"></col><col style="width: 382px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 402px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">顾客吃饭</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 382px; padding: 8px;"><div style="text-align: center;"><span style="font-size: 12pt;">Ajax</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 402px; padding: 8px;"><div><span style="font-size: 12pt;">点餐，告诉服务员吃什么，服务员记录</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 382px; padding: 8px;"><div style="text-align: left;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">准备页面请求，创建</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">XMLHttpRequest</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">对象</span></div></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 402px; padding: 8px;"><div style="text-align: left;"><span style="font-size: 12pt;">服务员带着菜单到后厨告诉厨师客人要吃哪些菜</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 382px; padding: 8px;"><div style="text-align: left;"><div><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; widows: 1; word-spacing: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">使用</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">XMLHttpRequest</span><span style="font-size: 12pt; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; widows: 1; word-spacing: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">对象的open（）和send（）方法发送资源请求给服务器</span></div></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 402px; padding: 8px;"><div><span style="font-size: 12pt;">厨师开始工作</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 382px; padding: 8px;"><div><span style="color: rgb(168, 168, 168);">后台计算</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 402px; padding: 8px;"><div style="text-align: left;"><span style="font-size: 12pt;">厨师菜炒好了，告诉服务员，服务员从厨师那儿取菜，并端给顾客</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 382px; padding: 8px;"><div style="text-align: left;"><div><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">onreadystatechange函数，状态改变时发送数据回客户端，</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">使用</span> <span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">XMLHttpRequest</span><span style="letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-size: 12pt; font-variant-caps: normal; font-variant-ligatures: normal;">对象的responseText或responseXML属性获得服务器的响应</span></div></div></td></tr></tbody></table><div><span style="font-size: 16pt;">    </span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 16pt;">    </span><img src="00-ajax笔记_files/四菜一汤.jpg" type="image/jpeg" data-filename="四菜一汤.jpg" style="font-size: 16pt;" width="285"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术，是一串 技术的集合，主要有：</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">1.JavaScript，通过用户或其他与浏览器相关事件捕获交互行为</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">2.XMLHttpRequest 对象，通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求；</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">3.服务器上的文件，以 XML、HTML 或 JSON 格式保存文本数据；</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">4.其它 JavaScript，解释来自服务器的数据（比如 PHP 从 MySQL 获取的数据）并将其 呈现到页面上。</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">由于 Ajax 包含众多特性，优势与不足也非常明显。优势主要以下几点：</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">1.不需要插件支持（一般浏览器且默认开启 JavaScript 即可）；</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">2.用户体验极佳（不刷新页面即可获取可更新的数据）；</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">3.提升 Web 程序的性能（在传递数据方面做到按需发送，不必整体提交）；</span></div><div><br clear="none"/></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">4.减轻服务器和带宽的负担（将服务器的一些操作转移到客户端）；</span></div><div><br clear="none"/></div><div><span style="font-size: 16px; border: 0px; widows: 1;">而 Ajax 的不足由以下几点：</span></div><div style="text-align: start;"><span style="font-size: 16px; widows: 1;"><span style="font-size: 16px; color: rgb(121, 121, 121);">1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前)； </span></span></div><div style="text-align: start;"><span style="font-size: 16px; border: 0px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-variant-caps: normal; font-variant-ligatures: normal;">2.前进、后退的功能被破坏（因为 Ajax 永远在当前页，不会记录前后页面）；</span></div><div><span style="font-size: 16px;">3.搜索引擎的支持度不够（因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容）；</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br/></div><div><span style="font-size: 12pt;">JSON (Javascript Object Notation, JS 对象标记) </span></div><div><br/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">{</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &quot;name&quot;:&quot;张三&quot;,</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &quot;age&quot;:18,</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &quot;like&quot;:[&quot;抽烟&quot;,&quot;喝酒&quot;,&quot;烫头&quot;]</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">}</font></span></div></div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">XML</span></div><div> </div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">&lt;person&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &lt;name&gt;张三&lt;/name&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &lt;age&gt;18&lt;/age&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &lt;like&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">        &lt;item&gt;抽烟&lt;/item&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">        &lt;item&gt;喝酒&lt;/item&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">        &lt;item&gt;烫头&lt;/item&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">    &lt;/like&gt;</font></span></div><div><span style="font-family: Monaco; color: rgb(51, 51, 51);"><font style="font-size: 12pt;">&lt;/person&gt;</font></span></div></div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><span style="font-size: 12pt;">json是一种数据格式，由对象，数组互相嵌套组成，</span><span style="font-size: 12pt; color: rgb(227, 0, 0);">属性名必须加双引号</span><span style="font-size: 12pt;">，数据传输格式</span></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br/></div><div><br clear="none"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">var xhr= new XMLHttpRequest();</font></span></div><div><font face="Arial" style="font-size: 12pt;">xhr<span style="color: rgb(51, 51, 51);"><font>.open(&quot;GET&quot;,&quot;url&quot;,true); //get请求，url请求地址，true代表异步</font></span></font></div><div><font face="Arial" style="font-size: 12pt;">xhr<span style="color: rgb(51, 51, 51);"><font>.send();</font></span></font></div><div><font face="Arial" style="font-size: 12pt;">xhr<span style="color: rgb(51, 51, 51);"><font>.onreadystatechange = function(){</font></span></font></div><div><font face="Arial" style="font-size: 12pt;"><span style="color: rgb(51, 51, 51);"><font>    if(</font></span>xhr<span style="color: rgb(51, 51, 51);"><font>.readyState == 4）{</font></span></font></div><div><font face="Arial" style="font-size: 12pt;"><font><span style="color: rgb(51, 51, 51);"><font>        if (</font></span></font>xhr<font>.status == 200<span style="color: rgb(51, 51, 51);"><font>) {</font></span></font></font></div><div><font face="Arial" style="font-size: 12pt;"><font><span style="color: rgb(51, 51, 51);"><font>            </font></span>console.log(</font>xhr<font>.responseText);</font></font></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">        }</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">        </font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">     }</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">}</font></span></div></div><div><br/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16pt; font-family: &quot;Yu Gothic UI&quot;;">xhr.readyState</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="text-align: left;"><span style="font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">0 － （未初始化）还没有调用send()方法</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="text-align: left;"><span style="font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">1 － （载入）已调用send()方法，正在发送请求</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="text-align: left;"><span style="font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">2 － （载入完成）send()方法执行完成，已经接收到全部响应内容</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="text-align: left;"><span style="font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">3 － （交互）正在解析响应内容</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; letter-spacing: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; -webkit-text-stroke-width: 0px; font-family: &quot;Yu Gothic UI&quot;; font-variant-caps: normal; font-variant-ligatures: normal;">4 － （完成）响应内容解析完成，可以在客户端调用了</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 16px; font-family: &quot;Yu Gothic UI&quot;;">HTTP 状态码 xhr.status</span></div><div style="text-align: left;"><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: rgb(51, 51, 51); font-family: &quot;Yu Gothic UI&quot;;">AJAX状态码说明</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>1**：请求收到，继续处理</b></span></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>2**：操作成功收到，分析、接受</b></span></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>3**：完成此请求必须进一步处理</b></span></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>4**：请求包含一个错误语法或不能完成</b></span></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>5**：服务器执行一个完全有效请求失败</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">100——客户必须继续发出请求</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>101——客户要求服务器根据请求转换HTTP协议版本</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>200——交易成功</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">201——提示知道新文件的URL     </span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">202——接受和处理、但处理未完成</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">203——返回信息不确定或不完整</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">204——请求收到，但返回信息为空</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">206——服务器已经完成了部分用户的GET请求</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">300——请求的资源可在多处得到</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">301——删除请求数据</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">302——在其他地址发现了请求数据</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">303——建议客户访问其他URL或访问方式</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>304——客户端已经执行了GET，但文件未变化</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">305——请求的资源必须从服务器指定的地址得到</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>306——前一版本HTTP中使用的代码，现行版本中不再使用</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">307——申明请求的资源临时性删除</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>400——错误请求，如语法错误</b></span></div><div style="font-size: 12pt;"><br/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">401——请求授权失败</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">402——保留有效ChargeTo头响应</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>403——请求不允许</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>404——没有发现文件、查询或URl</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>405——用户在Request-Line字段定义的方法不允许</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">406——根据用户发送的Accept拖，请求资源不可访问</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">407——类似401，用户必须首先在代理服务器上得到授权</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">408——客户端没有在用户指定的饿时间内完成请求</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">409——对当前资源状态，请求不能完成</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">410——服务器上不再有此资源且无进一步的参考地址</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">411——服务器拒绝用户定义的Content-Length属性请求</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">412——一个或多个请求头字段在当前请求中错误</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">413——请求的资源大于服务器允许的大小</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">414——请求的资源URL长于服务器允许的长度</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">415——请求资源不支持请求项目格式</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>500——服务器产生内部错误</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">501——服务器不支持请求的函数</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">502——服务器暂时不可用，有时是为了防止发生系统过载</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>503——服务器过载或暂停维修</b></span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div style="font-size: 12pt;"><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';">504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长</span></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt; font-family: Monaco; color: #333333;"/></div><div><span style="font-size: 16px; color: #333333; font-family: 'Yu Gothic UI';"><b>505——服务器不支持或拒绝支请求头中指定的HTTP版本</b></span></div></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div><div style="font-size: 12pt;"><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">GET，POST</span></div><div><br clear="none" style="font-size: 12pt;"/></div><div><span style="font-size: 12pt;">   只是不同的发送和请求数据的方式</span></div><table style="border-collapse: collapse; min-width: 100%;"><colgroup><col style="width: 275px;"></col><col style="width: 286px;"></col></colgroup><tbody><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 275px; padding: 8px;"><div style="text-align: center;">GET</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 286px; padding: 8px;"><div style="text-align: center;">POST</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 275px; padding: 8px;"><div><span style="font-size: 15px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">参数有长度限制</span></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 286px; padding: 8px;"><div><span style="font-size: 15px; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; color: rgb(26, 26, 26); font-family: -apple-system, BlinkMacSystemFont, &quot;Helvetica Neue&quot;, &quot;PingFang SC&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans SC&quot;, &quot;Noto Sans CJK SC&quot;, &quot;WenQuanYi Micro Hei&quot;, sans-serif; font-variant-caps: normal; font-variant-ligatures: normal;">无限制</span></div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 275px; padding: 8px;"><div><a href="http://www.taobao.com/?id=3" shape="rect" target="_blank">http://www.taobao.com?id=3</a></div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 286px; padding: 8px;"><div>放在请求体里</div></td></tr><tr><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 275px; padding: 8px;"><div>明文传输</div></td><td rowspan="1" style="border: 1px solid rgb(204, 204, 204); width: 286px; padding: 8px;"><div>更安全</div></td></tr></tbody></table><div><br clear="none" style="font-size: 12pt;"/></div><div><br clear="none" style="font-size: 12pt;"/></div><div style="box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.15);-en-codeblock:true;"><div><span style="color: rgb(51, 51, 51);"><font style="font-size: 12pt; font-family: Arial;">var xhr= new XMLHttpRequest();</font></span></div><div><font face="Arial" style="font-size: 12pt;">xhr</font><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">.open(&quot;POST&quot;,&quot;url&quot;,true);</font></span></div><div><font face="Arial" style="font-size: 12pt;">xhr</font><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">.setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;);</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">xhr.send(&quot;name=zhangsan&amp;age=18&quot;);</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">xhr.onreadystatechange = function(){</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">if(xhr.</font></span><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">readyState == 4){</font></span></div><div><font face="Arial" style="font-size: 12pt;"><span style="color: rgb(51, 51, 51);"><font>    if (xhr.</font></span></font><font face="Arial" style="font-size: 12pt;">status == 200<span style="color: rgb(51, 51, 51);"><font>) {</font></span></font></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">        var json = JSON.parse(xhr.</font></span><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">responseText);</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">        fn(json);</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">    }</font></span></div><div><span style="color: rgb(51, 51, 51);"><font face="Arial" style="font-size: 12pt;">}</font></span></div></div><div><br/></div><div><br/></div><div><br clear="none" style="font-size: 12pt;"/></div></div><div><br/></div></span>
</div></body></html> 